<template>
  <div class="inviteRegisterWrapper">
      <div class="registerBox">
          <div class="registerConBox">
              <div class="registerCon">
                <div class="inviteLogo"></div>
                <div class="conBox">
                    <div class="conItem">
                        <div class="iconIpt iconTelephone"></div>
                        <input type="text" class="conInput" placeholder="输入手机号" v-model="telephone">
                    </div>
                    <div class="conItem por">
                        <div class="iconIpt iconVerCode"></div>
                        <input type="text" class="conInput" placeholder="输入验证码" v-model="verCode">
                        <div v-if="!isSend" class="verCodeBox" @click="getVerCode">获取验证码</div>
                        <div v-else class="verCodeBox disabled">{{timeNum}}s重新获取</div>
                    </div>
                    <div class="conItem">
                        <div class="iconIpt iconPassword"></div>
                        <input type="password" class="conInput" placeholder="设置登录密码" v-model="password">
                    </div>
                    <div class="conItem">
                        <div class="iconIpt iconPassword"></div>
                        <input type="password" class="conInput" placeholder="确认登录密码" v-model="againPassword">
                    </div>
                </div>
                <div class="registerBtn" @click="submitRegisterInfo">立即注册</div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {ajax, registeCode, submitRegisterInfo} from '../../data/wap-service.js'
import { Toast } from 'mint-ui';
export default {
    data(){
        return {
            code: "",
            telephone: "",
            verCode: "",
            password: "",
            againPassword: "",
            isSend: false,
            islock: false,
            timer: "",
            timeNum: 60
        }
    },

    mixins: [ajax],

    created(){
        this.code = this.$route.query.code
    },

    methods:{
        getVerCode(){
            if(!this.telephone || this.telephone.length != 11){
                return Toast('请填写正确的手机号')
            }
            this.isSend = true
            this.timeOut()
            this.doajax(registeCode, {telephone: this.telephone}, res => {
                Toast('发送成功')
            })
        },

        submitRegisterInfo(){
            if(!this.telephone || this.telephone.length != 11){
                return Toast('请填写正确的手机号')
            }
            if(!this.verCode){
                return Toast('请填写验证码')
            }
            if(!this.password){
                return Toast('请填写登录密码')
            }
            if(this.password.length < 6){
                return Toast('登录密码不能小于6位')
            }
            if(this.password != this.againPassword){
                return Toast('两次密码不一致')
            }
            let data = {
                telephone: this.telephone,
                verCode: this.verCode,
                code: this.code,
                password: this.password
            }
            
            this.doajax(submitRegisterInfo, data, res => {
                location.href = "https://xcxmall.20lz.com/download/appDownload"
            })
        },

        timeOut(){
            this.timer = setInterval(() => {
                if(this.timeNum == 0){
                    clearInterval(this.timer)
                    this.isSend = false
                    this.timeNum = 60
                }else{
                    this.timeNum--
                }
            }, 1000)
        }
    }
}
</script>

<style>
.inviteRegisterWrapper{}
.inviteRegisterWrapper .registerBox{position:fixed; top: 0; right: 0; bottom: 0; left: 0; background: url(../../assets/invite/registerBg.png) no-repeat; background-size: 7.5rem 100%;}
.inviteRegisterWrapper .registerBox .registerConBox{padding: 1.08rem .3rem; }
.inviteRegisterWrapper .registerBox .registerConBox .registerCon{padding: .8rem .45rem; background: #ffffff; box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px -4px 8px 0px rgba(0, 0, 0, 0.1);}
.inviteRegisterWrapper .registerBox .registerConBox .registerCon .inviteLogo{height: .96rem; background: url(../../assets/invite/hypLogo.png) no-repeat center; background-size: 3rem .96rem; margin-bottom: .6rem;}
.inviteRegisterWrapper .registerBox .registerConBox .registerCon .conBox{padding-bottom: .2rem;}
.inviteRegisterWrapper .registerBox .registerConBox .registerCon .conBox .conItem{display: flex; width: 6rem; height: .8rem; background: #FFF2F2; border-radius: .4rem; margin-bottom: .24rem;}
.inviteRegisterWrapper .registerBox .registerConBox .registerCon .conBox .conItem .iconIpt{flex: 0 0 .8rem; height: .4rem; margin-top: .2rem; border-right: .02rem solid #CCCCCC;}
.inviteRegisterWrapper .registerBox .registerConBox .registerCon .conBox .conItem .iconIpt.iconTelephone{background: url(../../assets/invite/iconTelephone.png) no-repeat center; background-size: .26rem .4rem;}
.inviteRegisterWrapper .registerBox .registerConBox .registerCon .conBox .conItem .iconIpt.iconVerCode{background: url(../../assets/invite/iconVerCode.png) no-repeat center; background-size: .36rem .4rem;}
.inviteRegisterWrapper .registerBox .registerConBox .registerCon .conBox .conItem .iconIpt.iconPassword{background: url(../../assets/invite/iconPassword.png) no-repeat center; background-size: .26rem .4rem;}
.inviteRegisterWrapper .registerBox .registerConBox .registerCon .conBox .conItem .conInput{flex: 1; width: auto; background: transparent; padding-left: .2rem; font-size: .28rem; border:none; outline: none;}
.inviteRegisterWrapper .registerBox .registerConBox .registerCon .conBox .conItem.por{position: relative;}
.inviteRegisterWrapper .registerBox .registerConBox .registerCon .conBox .conItem .verCodeBox{position: absolute; right: 0; top: 0; width: 1.8rem; height: .8rem; text-align: center; line-height: .8rem; background: #FF4977; color: #ffffff; font-size: .28rem; border-top-right-radius: .4rem; border-bottom-right-radius: .4rem; cursor: pointer;}
.inviteRegisterWrapper .registerBox .registerConBox .registerCon .conBox .conItem .verCodeBox.disabled{background:#ddd; color: #000}

.inviteRegisterWrapper .registerBox .registerConBox .registerCon .registerBtn{height: .8rem; text-align: center; line-height: .8rem; color: #ffffff; background: #FF4977; font-size: .28rem; border-radius: .4rem; cursor: pointer;}
</style>
